@extends('layouts.back_stage')
@section('content')
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/element-2.4.1.css">
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/vue.js?v0.0.3"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/element-2.4.1.js"></script>
    <style>
    [v-cloak] {display: none;}
        .el-table__expanded-cell[class*=cell]{
            padding:0px 0px 0px 100px;
            /* border-bottom:none; */
            border-right:none;
        }
        .el-table .el-table{
            border-top:none;
            border-bottom:none;
        }
        .el-table .el-table .el-table__row td:last-child{
            border-right:none;
        }
        .el-table .el-table .el-table__row:last-child td{
            border-bottom: none;
        }
        .el-table .el-table .has-gutter{
            display: none;
        }
    </style>
    <div class="container">
        <div class="row">
            <div style="padding-top:20px;">
                <h3 >编辑权限分配</h3>
            </div>
            <div id="app" v-cloak>
                <el-row style="padding: 20px;background-color: #fff;">
                     公司：
                    <label>
                      <el-input v-model="client" placeholder="请填写角色名" size="small" disabled ></el-input>
                    </label>
                     部门：
                    <label>
                      <el-input v-model="department" placeholder="请填写角色名" size="small"  disabled></el-input>
                    </label>
                    角色：
                    <label>
                      <el-input v-model="roleName" placeholder="请填写角色名" size="small" clearable></el-input>
                    </label>
                    <el-button type="primary" style="float:right" @click="maxAllChoose" size="small">一键全选</el-button>

                    <el-collapse v-model="activeNames" size="small">
                        <el-collapse-item v-for="(item,index) in data" :title="item.name" :name="item.id" :key="item.id">
                            <el-card class="box-card" v-for="page in item.child" :key="page.name" style="margin-bottom:15px;">
                                <div slot="header" class="clearfix">
                                    <span>@{{ page.name }}</span>
                                    <el-checkbox style="float: right; padding: 3px 0" v-model="page.allChoose" @change="midAllChoose(page);checkMax(item)">全选</el-checkbox>
                                </div>
                                <div class="text item">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox @change="addFatherNode(item.id,page.id,box.id,page,item)" v-for="box in page.child" :label="box.id" :key="box.id">@{{ box.name }}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-card>
                        </el-collapse-item>
                    </el-collapse>
                    <el-button type="primary" @click="save" size="small" style="float:right">保存</el-button>
                </el-row>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data() {
                return {
                    data:[],
                    client:'',
                    department:'',
                    roleName:'',
                    activeNames:[],
                    checkList:[],
                    maxAll:false,
                }
            },
            mounted(){
                this.getNode()
            },
            methods: {
                getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        // url:'https://www.easy-mock.com/mock/5b064f5930326c5f056244a8/store/getNode',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            console.log(12121212,res)
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                                self.getChooseNode()
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                getChooseNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/has_node/'+$.getUrlParam('id'),
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            
                            if(res.result.success == true){
                                self.roleName = res.content.data.rolename
                                self.client = res.content.data.client.company_name
                                if(res.content.data.department==null){
                                    res.content.data.department=''
                                }
                                self.department = res.content.data.department.department
                                let data = res.content.data.roles_node
                                data = data.split(',')
                                let numberData = []
                                for(let value of data){
                                    numberData.push(Number(value))
                                    self.data.forEach(element => {
                                        for(mid in element.child){
                                            let mid_lock = 0
                                            if(element.child[mid].id == Number(value)){
                                                for(mid_id in element.child[mid].child){
                                                    if(data.indexOf(element.child[mid].child[mid_id].id.toString()) != -1){
                                                    }else{
                                                        mid_lock = 1
                                                    }
                                                }
                                                if(mid_lock == 0){
                                                    element.child[mid].allChoose = true
                                                }
                                            }
                                        }
                                    })
                                }
                                self.checkList = numberData
                            //    console.log(2222,self.checkList)
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                            
                        },
                        error: function() {
                        }
                    });
                },
                checkMax(max){
                    let self = this
                    let max_lock = 0
                    for(mid in max.child){
                        if(this.checkList.indexOf(max.child[mid].id) != -1){
                            if(this.checkList.indexOf(max.id) == -1){
                                this.checkList.push(max.id)
                            }
                            return false
                        }else{
                            this.checkList = this.checkList.filter(o =>  o != max.id)

                        }
                    }
                },
                addFatherNode(max,mid,min,mid_arr,max_arr){
                    if(this.checkList.indexOf(max) == -1){
                        this.checkList.push(max)
                    }
                    if(this.checkList.indexOf(mid) == -1){
                        this.checkList.push(mid)
                    }
                    let min_lock = 0
                    let min_len = 0
                    for(value in mid_arr.child){
                        if(this.checkList.indexOf(mid_arr.child[value].id) != -1){
                            min_lock++
                        }
                        min_len++
                    }
                    if(min_lock == min_len){
                        mid_arr.allChoose = true
                    }else{
                        mid_arr.allChoose = false
                    }
                    if(min_lock == 0){
                        this.checkList = this.checkList.filter(o =>  o != mid)
                    }
                    this.checkMax(max_arr)
                },
                midAllChoose(item){
                    if(item.allChoose == true){
                        for(value in item.child){
                            if(this.checkList.indexOf(item.child[value].id) == -1){
                                this.checkList.push(item.child[value].id)
                            }
                        }
                        if(this.checkList.indexOf(item.id) == -1){
                            this.checkList.push(item.id)
                        }
                    }else{
                        for(value in item.child){
                            if(this.checkList.indexOf(item.child[value].id) != -1){
                                this.checkList = this.checkList.filter(o =>  o != item.child[value].id)
                            }
                        }
                        this.checkList = this.checkList.filter(o => o != item.id)
                    }
                },
                maxAllChoose(){
                    let self = this
                    if(self.maxAll == false){
                        self.data.forEach(value => {
                            if(self.checkList.indexOf(value.id) == -1){
                                self.checkList.push(value.id)
                            }
                            for(mid in value.child){
                                value.child[mid].allChoose = true
                                if(this.checkList.indexOf(mid) == -1){
                                    this.checkList.push(value.child[mid].id)
                                }
                                self.midAllChoose(value.child[mid])
                            }
                        })
                        self.maxAll = true
                    }else{
                        self.data.forEach(value => {
                            for(mid in value.child){
                                value.child[mid].allChoose = false
                                self.checkList = []
                            }
                        })
                        self.maxAll = false
                    }
                },
                save(){
                    let self = this
                    let roles_node = self.checkList.join(',')
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/role_operation/'+$.getUrlParam('id'),
                        type: 'patch',
                        data: {
                            rolename:self.roleName,
                            roles_node:roles_node
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                self.$notify({
                                    title: '提示',
                                    message:'更新成功'
                                });
                                setTimeout(() => {
                                    window.location.href="/distribute/role/indexpage"
                                }, 1000);
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }

                        },
                        error: function() {
                        }
                    });
                }
            },
        })
    </script>
    @include('errors.list')
@endsection